<template>
  <div class="index">
    <mains :title="'首页'"></mains>
    <div class="indexBigBox">
      <!-- 五个列表 -->
      <fiveList></fiveList>
      <!-- echarts图表 -->
      <div class="eachartsBox">
        <indexEcharts></indexEcharts>
        <indexEcharts1></indexEcharts1>
      </div>
      <!-- 表格 -->
      <div class="table_one">
        <h2>实时挂号</h2>
        <table class="custom-table">
          <tr>
            <th>头像</th>
            <th>患者姓名</th>
            <th>患者手机号码</th>
            <th>挂号科室</th>
            <th>挂号费</th>
            <th>预约时间</th>
          </tr>
          <tr> 
            <td><img src="../assets/ncImg/1.png" alt=""></td>
            <td>张三</td>
            <td>123456789</td>
            <td>心内科</td>
            <td>100</td>
            <td>2022-01-01 12:00:00</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import mains from '@/components/main.vue'
import fiveList from '@/components/ncComponents/fiveList.vue'
import indexEcharts from '@/components/ncComponents/indexEcharts.vue'
import indexEcharts1 from '@/components/ncComponents/indexEcharts copy.vue'
// 表格
const columns = reactive([
  {
    title: '头像',
    key: 'img',
  },
  {
    title: '患者姓名',
    key: 'name',
  },
  {
    title: '患者手机号码',
    key: 'tel',
  },
  {
    title: '挂号科室',
    key: 'clas',
  },
  {
    title: '挂号费',
    key: 'money',
  },
  {
    title: '挂号时间',
    key: 'date',
  }
])
const data = reactive([
  {
    img:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
    name: 'John Brown',
    tel: 1664545348,
    clas: 'New York No. 1 Lake Park',
    money: '100.00',
    date: '2016-10-03',
  },
  {
    name: 'Jim Green',
    tel: 17584624,
    clas: 'London No. 1 Lake Park',
    money: '120.00',
    date: '2016-10-01',
  },
  {
    name: 'Joe Black',
    tel: 185745330,
    clas: 'Sydney No. 1 Lake Park',
    money: '99.00',
    date: '2016-10-02',
  },
  {
    name: 'Jon Snow',
    tel: 1745326,
    clas: 'Ottawa No. 2 Lake Park',
    money: '80.00',
    date: '2016-10-04',
  },
])
</script>

<style scoped>
.eachartsBox {
  display: flex;
  justify-content: space-between;
}

.table_one{
  padding: 10px;
  width: 600px;
  height: 300px;
  background-color: #fff;
  margin-left: 12px;
  margin-top: 20px;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.custom-table th,
.custom-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.custom-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.custom-table tr:hover {
  background-color: #f5f5f5;
}

.custom-table img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}
</style>